<template>
   <!-- 地图容器外层包装 -->
   <div class="map-container">
      <!-- 地图实际渲染容器 -->
      <div id="mapContainer" class="map-content"></div>
   </div>
</template>
   
<script>
// 引入高德地图加载器
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'Map',
  data() {
    return {
      map: null, // 地图实例
      geolocation: null // 定位实例
    }
  },
  mounted() {
    // 组件挂载后初始化地图
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      // 配置高德地图安全密钥
      window._AMapSecurityConfig = {
        securityJsCode: 'feed501f3a7e863056ac75a6431a1f47',
      }
      // 加载高德地图
      AMapLoader.load({
        key: '5366a5977f31f4d8c3fb4933b008ad6a', // 高德地图 Key
        version: '2.0', // 地图版本
        plugins: ['AMap.Geolocation'] // 需要使用的插件列表
      })
        .then(AMap => {
          // 创建地图实例
          this.map = new AMap.Map('mapContainer', {
            zoom: 11, // 地图缩放级别
            center: [116.39, 39.9] // 地图中心点坐标
          })
          
          // 初始化定位插件
          this.geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 定位超时时间，单位：毫秒
            buttonPosition: 'RB', // 定位按钮停靠位置，RB表示右下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量
            zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
          })

          // 将定位控件添加到地图
          this.map.addControl(this.geolocation)

          // 获取当前位置
          this.getCurrentPosition()
        })
        .catch(e => {
          console.error('地图加载失败：', e)
        })
    },

    // 获取当前位置
    getCurrentPosition() {
      this.geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          // 定位成功
          const { position } = result
          // 创建标记
          const marker = new AMap.Marker({
            position: [position.lng, position.lat], // 标记位置
            title: '我的位置' // 鼠标悬停时的提示文字
          })
          // 将标记添加到地图
          this.map.add(marker)
          // 将地图中心移动到当前位置
          this.map.setCenter([position.lng, position.lat])
        } else {
          // 定位失败
          console.error('定位失败：', result.message)
        }
      })
    }
  },
  beforeDestroy() {
    // 组件销毁前清理地图实例
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>
   
<style lang="scss" scoped>
/* 地图容器样式 */
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 地图内容样式 */
.map-content {
  width: 100%;
  height: 100%;
  min-height: 500px; // 设置最小高度，确保地图有足够的显示空间
}
</style>